<!DOCTYPE html>
<html lang="en">
<head>
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .aaa {
            width: 200px;

        }

        .bbb {
            position: fixed;
            left: 600px;
            top: 40px;
        }

        #ddd {
            margin: 0 auto;
            padding-left: 200px;
        }

        a {
            text-decoration: none;
        }

        button {
            width: 80px;
            height: 40px;
        }

        .ccc {
            width: 800px;

        }

        .not-arrow {
            padding: 5px 10px;
            border: 1px solid #dcd8d8;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
        }

        .not-arrow::-ms-expand {
            display: none;
        }
    </style>
</head>
<body>

<div id="app">
    <div id="ddd">

        <el-form id="updateForm" :model="employee" ref="employee">

            <el-form-item label="员工头像" class="bbb">
                <img id="aaa" :src="employee.imgURL" width="220px" height="220px"><br />
            </el-form-item>

            <input v-model="employee.id" type="hidden" name="id" class="aaa">
            <el-form-item label="姓名" prop="name" class="aaa">
                <el-input v-model="employee.name" name="name"></el-input>
            </el-form-item>

            <el-form-item label="学历" prop="education" class="aaa">
                <el-input v-model="employee.education" name="education"></el-input>
            </el-form-item>

            <el-form-item label="手机号" prop="telephone" class="aaa">
                <el-input v-model="employee.telephone" name="telephone"></el-input>
            </el-form-item>

            <el-form-item label="员工科室" prop="kid">
                <select v-model="employee.kid" placeholder="请选择员工科室" name="kid" disabled="disabled"
                        class="not-arrow">
                    <option v-for="(k,i) in departmentArr " :label="k.kname" :value="k.id"></option>
                </select>
            </el-form-item>

            <el-form-item label="社会职务" prop="society" class="ccc" >
                <el-input type="textarea" v-model="employee.society" name="society"></el-input>
            </el-form-item>

            <el-form-item label="专业特长" prop="spe"  class="ccc">
                <el-input type="textarea" v-model="employee.spe" name="spe"></el-input>
            </el-form-item>

            <el-form-item label="个人简介" prop="profile" class="ccc" >
                <el-input type="textarea" v-model="employee.profile" name="profile"></el-input>
            </el-form-item>

        </el-form>
    </div>

</div>



<script>
    $.get("/ssm/department/list", function(backData) {
        haha.departmentArr = backData.data;
    });

    var id = window.location.href.split("=")[1];

    $.get("/ssm/sta/getEmployee?id=" + id, function(backData) {
        if (backData.code == 1) {
            haha.employee = backData.data;
        }
    });


    var haha = new Vue({
        el: "#app",
        data: {
            employee: {},
            departmentArr: [],
            msg: ""
        },
        methods: {}
    });
</script>
</body>
</html>
